<template>
	<view>
		<view class="tab_box">
			<u-tabs :list="tabList" :is-scroll="false" :current="current" active-color="#DA251D" bar-width="60" font-size="32" @change="tabChange"></u-tabs>
		</view>
		<view class="record_list">
			<view v-for="(item,index) in recordList" :key="index" class="item_box">
				<view class="top">
					<text>{{item.state == 0 ? '待领取' : item.state == 1 ? '待发货' : '已发货'}}</text>
					<text>{{item.date}}</text>
				</view>
				<view class="item_content">
					<image :src="item.imgUrl" mode=""></image>
					<view class="right">
						<view class="title">{{item.title}}</view>
						<u-button type="default"  :custom-style="btnStyle" v-show="item.state != 1" hover-class="none" @click="toDetail(item.state)">{{item.state == 0 ? '立即领取' : item.state == 2 ? '查看物流' : ''}}</u-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				tabList: [
					{
						name: '待领取'
					},
					{
						name: '待发货'
					},
					{
						name: '已发货'
					}
				],
				recordList: [
					{
						id: 0,
						state: 0,
						date: '2020-11-03 10:11',
						imgUrl: '/static/indexImage/11.png',
						title: '我和我的祖国',
					},
					{
						id: 1,
						state: 1,
						date: '2020-11-03 10:11',
						imgUrl: '/static/indexImage/11.png',
						title: '我和我的祖国',
					},
					{
						id: 2,
						state: 2,
						date: '2020-11-03 10:11',
						imgUrl: '/static/indexImage/11.png',
						title: '我和我的祖国',
					},
				],
				btnStyle: {
					'padding': '15upx 25upx'
				}
			};
		},
		methods: {
			tabChange(index) {
				this.current = index;
			},
			toDetail(state) {
				if (state == 0) {
					uni.navigateTo({
						url: '../address/address'
					})
				}
				if (state == 2) {
					uni.navigateTo({
						url: '../logistics/logistics'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.tab_box {
	box-shadow: 0px 4px 8upx 0px rgba(4, 0, 0, 0.1);
}
.empty_box {
	width: 100%;
	height: 70vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	image {
		width: 186upx;
		height: 196upx;
		margin-bottom: 45upx;
	}
	text {
		font-size: 24upx;
		color: $color-666;
		margin-bottom: 58upx;
	}
	.btn {
		font-size: 30upx;
		color: #ffffff;
		padding: 15upx 53upx;
		border-radius: 8upx;
		background: #373846;
	}
}

.record_list {
	padding: 30upx;
	.item_box {
		padding: 33upx 20upx;
		border-radius: 10upx;	
		box-shadow: 0px 4upx 10upx 0px rgba(4, 0, 0, 0.1);
		margin-bottom: 30upx;
		image {
			width: 160upx;
			height: 210upx;
			border-radius: 10upx;
		}
		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 30upx;
			border-bottom: 2upx solid #EEEEEE;
			text {
				&:first-child {
					font-size: 28upx;
				}
				&:last-child {
					font-size: 24upx;
					color: $color-999;
				}
			}
		}
		.item_content {
			padding-top: 30upx;
			display: flex;
			justify-content: space-between;
			// align-items: center;
			.right {
				.title {
					font-size: 28upx;
					text-align: right;
					margin-bottom: 90upx;
				}
			}
			button {
				font-size: 26upx;
			}
		}
	}
}
</style>
